<template>
  <div class="index-container">
    <div class="warpper">
      <van-form @submit="onSubmit">
        <van-field
          v-model="selfUserInfo.id"
          name="id"
          label="主键"
          placeholder="主键"
          readonly
          v-show="false"
        />
        <van-field
          v-model="selfUserInfo.aae100"
          name="aae100"
          label="有效标识"
          placeholder="有效标识"
          readonly
          v-show="false"
        />
        <van-field
          v-model="selfUserInfo.xm"
          name="xm"
          label="姓名"
          placeholder="姓名"
          v-show="false"
          readonly
        />

        <van-field
          v-model="selfUserInfo.idcard"
          name="idcard"
          label="证件号码"
          placeholder="证件号码"
          readonly
          v-show="false"
        />
        <van-field
          v-model="selfUserInfo.tel"
          name="tel"
          label="手机号码"
          placeholder="手机号码"
          v-show="false"
          readonly
        />
        <van-field
          v-model="selfUserInfo.fakexm"
          name="fakexm"
          label="姓名"
          placeholder="姓名"
          readonly
          :rules="[{ required: true, message: '请填写姓名' }]"
        />
        <van-field
          name="xb"
          label="性别"
          :rules="[{ required: true, message: '请选择性别' }]"
        >
          <template #input>
            <van-radio-group v-model="selfUserInfo.xb" direction="horizontal">
              <van-radio name="male">男</van-radio>
              <van-radio name="female">女</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="selfUserInfo.fakeidcard"
          name="fakeidcard"
          label="证件号码"
          placeholder="证件号码"
          readonly
          :rules="[{ required: true, message: '请填写证件号码' }]"
        />
        <van-field
          v-model="selfUserInfo.faketel"
          name="faketel"
          label="手机号码"
          placeholder="手机号码"
          readonly
          :rules="[{ required: true, message: '请填写手机号码' }]"
        />
        <van-field
          v-model="selfUserInfo.chlx"
          name="chlx"
          label="人员类型"
          placeholder="人员类型"
          readonly
          :rules="[{ required: true, message: '请填写人员类型' }]"
        />

        <van-field
          v-model="selfUserInfo.dw"
          name="dw"
          label="单位"
          placeholder="单位"
          :rules="[{ required: true, message: '请填写单位' }]"
        />
        <van-field
          v-model="selfUserInfo.email"
          name="email"
          label="电子邮箱"
          placeholder="电子邮箱"
          :rules="[{ required: true, message: '请填写电子邮箱' }]"
        />

        <van-field
          name="jtfs"
          label="交通方式"
          :rules="[{ required: true, message: '请选择性别' }]"
        >
          <template #input>
            <van-radio-group v-model="selfUserInfo.jtfs" direction="horizontal">
              <van-radio name="飞机">飞机</van-radio>
              <van-radio name="高铁">高铁</van-radio>
              <van-radio name="自驾">自驾</van-radio>
            </van-radio-group>
          </template>
        </van-field>

        <van-field
          readonly
          clickable
          name="ddrq"
          :value="selfUserInfo.ddrq"
          label="到达日期"
          placeholder="点击选择日期"
          :rules="[{ required: true, message: '请填写到达日期' }]"
          @click="showCalendar('ddrq')"
        />
        <van-field
          v-model="selfUserInfo.ddhb"
          name="ddhb"
          label="到达航班/车次"
          placeholder="到达航班/车次"
          :rules="[{ required: true, message: '请填写到达航班/车次' }]"
        />
<!--        选填-->
        <van-field
          :value="selfUserInfo.fcrq"
          name="fcrq"
          label="返程日期"
          placeholder="点击选择日期"
          @click="showCalendar('fcrq')"
        />
<!--        选填-->
        <van-field
          v-model="selfUserInfo.fchb"
          name="fchb"
          label="返程航班/车次"
          placeholder="返程航班/车次"
        />
        <van-field
          v-model="selfUserInfo.bz"
          name="bz"
          label="备注"
          placeholder="备注"
        />
        <van-field name="uploadpicture" label="证件照">
          <template #input>
            <van-uploader
              v-model="selfUserInfo.uploadpicture"
              :after-read="afterRead"
              accept="image/*"
              :max-count="1"
              :max-size="2000*1024"
              @oversize="onOversize"
            />
          </template>
        </van-field>
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
<!--      日历组件-->
      <van-calendar v-model="arrivesShowCalendar" @confirm="arriveCalenderConfirm" />

    </div>
  </div>
</template>

<script>
import {saveUserInfo} from "api/userInfo";
import { Dialog } from 'vant';
import minixUploadPic from '@/minix/minixUploadPic'
import minixUserSave from '@/minix/minixUserSave'
import minixCalendar from '@/minix/minixCalendar'
import minixLoadPic from '@/minix/minixLoadPic'

export default {
  name: "expert",
  props:{
    userInfo:{type:Object}
  },
  mixins: [minixUploadPic,minixUserSave,minixCalendar,minixLoadPic],  //复用mixin
  data(){
    return{
      selfUserInfo:{...this.userInfo},
      arrivesShowCalendar:false,
      calendarNanme:null,
    }
  },
  mounted() {
    console.log("专家参赛信息挂载")
    this.loadPic()

  },
  methods:{
    // onSubmit(data){
    //   delete data.fakexm;
    //   delete data.faketel;
    //   delete data.fakeidcard;
    //   console.log("专家参赛保存操作")
    //   data.aae036="2021-02-01"
    //   saveUserInfo(data).then(
    //     res =>{
    //       if(res.code == 200){
    //         Dialog.alert({
    //           message: '保存成功',
    //         })
    //       }
    //     }
    //   ).catch(err =>{
    //     console.log("专家参赛保存失败："+err)
    //     Dialog.alert({
    //       title: '错误信息',
    //       message: '保存失败',
    //     })
    //   })
    // },
    // showCalendar(name){
    //   this.arrivesShowCalendar = true;
    //   this.calendarNanme = name
    // },
    // arriveCalenderConfirm(date){
    //   this.selfUserInfo[this.calendarNanme] = `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    //   this.arrivesShowCalendar = false;
    // },
  }
}
</script>

<style scoped>

</style>
